<template>
  <div>
    <zm-form>
      <zm-form-item label="选择线下特殊节假日规则">
        <zm-button
          type="primary"
          icon="el-icon-plus"
          @click="handleChoosePlan"
          size="mini"
        >
          选择方案
        </zm-button>
      </zm-form-item>
    </zm-form>
    <zm-detail-table
      :list="list"
      :info="detailInfo"
      v-if="showDetail"
    ></zm-detail-table>
    <!-- 详情规则折叠面板 -->
    <detail-collapse
      :info-list="detailInfo.rule"
      v-if="showDetail"
      :exchange-range="detailInfo.exchangeRange"
    ></detail-collapse>
    <!-- 选择方案组件 -->
    <choose-plan
      v-if="choosePlanParams.visible"
      v-model="choosePlanParams.visible"
      @handle-after="choosePlanCallBack"
      :params="choosePlanParams.params"
      :selected="selectedID"
    ></choose-plan>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import ChoosePlan from '../ChoosePlan'
import ZmDetailTable from '@/components/zmDetailTable'
import DetailCollapse from '@/views/product/components/DetailCollapse'
import productProgramApis from '@/api/src/productProgram'
import { list } from './const'
export default {
  name: 'OfflineSpecial',
  components: { ChoosePlan, ZmDetailTable, DetailCollapse },
  mixins: [tableMixin],
  inject: ['$product'],
  data () {
    return {
      choosePlanParams: {
        visible: false
      },
      detailInfo: {},
      showDetail: false,
      selectedID: ''
    }
  },
  computed: {
    list () {
      return list(this)
    },
    form: {
      get () {
        return this.$product.form
      },
      set (val) {
        this.$product.form = val
      }
    }

  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.$product.id) {
        // 数据回填
        if (this.form.offlineSpecialRule[0].programId) {
          this.selectedID = this.form.offlineSpecialRule[0].programId
          this.choosePlanCallBack(this.selectedID)
        }
      }
    },
    handleChoosePlan () {
      this.choosePlanParams = {
        visible: true,
        params: {
          exchangeRange: 'offline',
          type: this.form.type // 第一步选择的产品类型
        }
      }
      this.selectedID = this.form.offlineSpecialRule[0].programId
    },
    async choosePlanCallBack (val) {
      this.$set(this.form.offlineSpecialRule, 0, { programId: val })
      const _res = await productProgramApis.getInfo({ id: val })
      this.detailInfo = _res
      this.showDetail = true
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
